<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
    <div class="container">
        <section id="content">
            <div class="content-header">
                <a href="http://liangxinixn.gitee.io/software-engineering-test-1/homework_2/login-success.html">登录</a>
                <a>注册</a>
            </div>
            <div class="content-body">
                <form action="#">
                <div class="dom" style="display: block;">
                    <div class="s1" style="margin-top:40px">
                        <h4>账号</h4>
                        <input placeholder="有户名/手机/邮箱" type="text">
                    </div>
                    <div class="s1">
                        <h4>密码</h4>
                        <input placeholder="请输入密码" type="password">
                    </div>
                    <div class="s2">
                        <input type="checkbox">
                        <span>记住密码</span>
                    </div>
                    <input class="btn" type="submit" value="登&nbsp录">
                </div>
                </form>
                <div class="dom-footer">
                    <div class="login-another">
                        <a>找回密码</a>
                        <span>|</span>
                        <span>还没有账号</span>
                        <a>立即注册</a>
                    </div>
                    <div class="login-three">
                        <span>
                            使用第三方账号直接登录
                        </span>
                        <div class="login-icon">
                            <a href="https://gitee.com/liangxinixn/software-engineering-test-1/blob/master/homework_2/login-success.html"><img src="https://gitee.com/liangxinixn/blog002/raw/master/image01/qeaq.png"></a>
                            <a href="#"></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
<style>
    #content{
        width: 50rem;
        /* height: 60rem; */
        border: 0.1rem solid #e0e0e0;
        /* background-color: red; */
        margin: 10rem auto;
    }
    .clearfix::before, .clearfix::after {
    content: '';
    display: block;
    clear: both;
}
    #content .content-header a.current {
    background-color: transparent;
    color: purple;
}
    #content .content-header a {
    width: 50%;
    height: 60px;
    background-color: #f5f5f5;
    display: inline-block;
    float: left;
    text-align: center;
    line-height: 60px;
    color: #262626;
}
#content .content-body {
    /* background-color: red; */
    padding: 4rem;
}
#content .content-body .dom {
    width: 100%;
    display: none;
}
#content .content-body .dom .s1 {
    /* background-color: red; */
    margin-bottom: 2rem;
}
#content .content-body .dom .s1 h4 {
    color: #666666;
}
#content .content-body .dom .s1 input {
    width: 100%;
    height: 4rem;
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    border-radius: 5px;
    border: 1px solid #cccccc;
}
#content .content-body .dom .btn {
    width: 100%;
    height: 4rem;
    border: none;
    font-size: 2rem;
    color: #fff;
    background-color: purple;
    border-radius: 3px;
    margin-bottom: 2rem;
    margin-top: 10px;
    cursor: pointer;
}
#content .content-body .dom-footer .login-three {
    color: #666666;
    text-align: center;
}
#content .content-body .dom-footer .login-three span {
    /* background-color: red; */
    position: relative;
    bottom: -20px;
}

#content .content-body .dom-footer .login-three span::before, #content .content-body .dom-footer .login-three span::after {
    content: '';
    display: inline-block;
    width: 10rem;
    height: 0.1rem;
    border-bottom: 1px solid #e0e0e0;
    position: absolute;
    top: 50%;
}
#content .content-body .dom-footer .login-three span::before {
    left: -65%;
}
#content .content-body .dom-footer .login-three span::after {
    right: -65%;
}
#content .content-body .dom-footer .login-icon {
    margin-top: 3rem;

}
#content .content-body .dom-footer .login-icon img {
    width: 5rem;
}
</style>
</html>